<template>
  <div class="page-container">
    <ComCopTable
      :handleDelete="handleDelete"
      :handleChangePage="handleChangePage"
      :data="commmentRes.data"
      :query="commmentRes.query"
    />
  </div>
</template>

<script setup lang="ts">
import { deleteComment, getPageComment } from "@/api/comment";
import { ICommentQuery, IReturnCom } from "@/api/comment";
import ComCopTable from "@/components/ComCopTable.vue";
import { ElMessage } from "element-plus";
import { onBeforeMount, reactive, watch } from "vue";

interface ICommen {
  data: IReturnCom;
  query: ICommentQuery;
}
const commmentRes = reactive<ICommen>({
  data: {
    rows: [],
    total: 0,
  },
  query: {
    page: 1,
    limit: 5,
    blogid: "-1",
    keyword: "",
  },
});

// 数据的请求
async function fetchData() {
  const res = await getPageComment({ ...commmentRes.query });
  if (res.code === 0) {
    commmentRes.data = res.data;
  } else {
    ElMessage({
      type: "error",
      message: res.msg,
    });
  }
}

// 监听query的变化
watch(
  () => commmentRes.query,
  () => {
    fetchData();
  },
  {
    deep: true,
  }
);

// 实行删除操作
async function handleDelete(id: string) {
  await deleteComment(id);
  fetchData();
}

function handleChangePage(val: number, key: string) {
  if (key === "limit") {
    commmentRes.query.page = 1;
  }
  commmentRes.query[key] = val;
}

onBeforeMount(() => {
  fetchData();
});
</script>

<style lang="scss" scoped></style>
